<template>
    <view class="toast-container" v-show="show">
        <view class="toast-body-layout">
            <text>{{ message }}</text>
        </view>
    </view>
</template>

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
    message: String,
    show: Boolean
});
const emit = defineEmits(['update:show']);
const duration = ref(3);
const toastTimer = ref();
watch(
    () => props.show,
    (newValue) => {
        if (newValue) {
            duration.value = 3;
            toastTimer.value = setInterval(decrementDuration, 1000);
        } else {
            clearInterval(toastTimer.value);
        }
    }
);
watch(duration, (newValue) => {
    if (newValue <= 0) {
        emit('update:show', false);
    }
});
function decrementDuration() {
    duration.value--;
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.toast-container {
    @extend .toast-layout;
}
</style>
